<img
  id="frog-img"
  alt="Frog Menu"
  src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/frog_map.jpg"
  usemap="#frog-map"
/>
<map name="frog-map">
  <area shape="rect" data-name="menu1hot" coords="10,10,120,330" href="#" />
  <area shape="rect" data-name="menu1" coords="10,340,110,390" href="#" />
  <area shape="rect" data-name="menu2hot" coords="120,10,230,330" href="#" />
  <area shape="rect" data-name="menu2" coords="120,340,220,390" href="#" />
  <area shape="rect" data-name="menu3hot" coords="230,10,340,330" href="#" />
  <area shape="rect" data-name="menu3" coords="230,340,330,390" href="#" />
  <area shape="rect" data-name="menu4hot" coords="340,10,450,330" href="#" />
  <area shape="rect" data-name="menu4" coords="340,340,440,390" href="#" />
</map>
